<template>
<el-tabs tab-position="left" style="margin: 20px 0 0 0;" class="demo-tabs">
    <el-tab-pane label="整体" style="margin: 20px 0 0 0;min-width: 400px;min-height: 300px; " value="1">
      <template #label>
        <span class="custom-tabs-label">
          <span>整体</span>
        </span>
      </template>
      <scoreIndex></scoreIndex>
    </el-tab-pane>
    <el-tab-pane label="单个" style="margin: 20px 0 0 0;min-width: 400px;min-height: 300px; " value="1">
      <template #label>
        <span class="custom-tabs-label">
          <span>单个</span>
        </span>
      </template>
      <scoreIndexOne></scoreIndexOne>
    </el-tab-pane>
	<el-tab-pane label="单个折线图" style="margin: 20px 0 0 0;min-width: 100px;min-height: 300px; " value="1">
	  <template #label>
	    <span class="custom-tabs-label">
	      <span>单个折线图</span>
	    </span>
	  </template>
	  <el-select v-model="value1" filterable placeholder="请选择" style="margin-left: 70px;">
	      <el-option
	        v-for="item in deptOption"
	        :label="item.deptName"
	        :value="item.id"
	  			>
	      </el-option>
	    </el-select>
	  <scoreIndexOneEchart style="width:1200px;highttext-align:center" ref="echart3" :echartData="echartData1"></scoreIndexOneEchart>
	</el-tab-pane>
  </el-tabs>
</template>


<script setup>
import {ref, onMounted,onBeforeMount, reactive,watch} from "vue";
import { Timer } from '@element-plus/icons-vue';
import {useRouter} from "vue-router";
import { ElMessage } from 'element-plus'
import scoreIndex from './components/scoreIndex'
import scoreIndexOne from './components/scoreIndexOne'
import scoreIndexOneEchart from './components/scoreIndexOneEchart'
import { getDeptPerformance ,getAllDept} from "@/api/report";

onBeforeMount(()=>{
	begin();
	getAllDeptA();
})

const echartData1 = ref([]);

var deptId = "1"

const begin = ()=>{
	getDeptPerformance({deptId}).then((data) => {
		echartData1.value = data.data;
	});
}
var value1 = ref("中捷总公司");
const deptOption = ref([]);
const getAllDeptA = () => {
	getAllDept().then(data=>{
	      for (let i = 0; i < data.length; i++) {
	        deptOption.value.push({
	          deptName: data[i].deptName,
	          id: String(data[i].id)
	        })
	    }
		deptOption.value.push({
		  deptName: "主战部门",
		  id: 777
		})
		deptOption.value.push({
		  deptName: "主建部门",
		  id: 888
		})
		deptOption.value.push({
		  deptName: "职能部门",
		  id: 999
		})
		
	})
};

watch(value1, (newValue, oldValue) => {
	deptId = newValue
	getDeptPerformance({deptId}).then((data) => {
		echartData1.value = data.data;
	});
	
}, { deep: true });


</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.button{
  margin-left:205px;
  float: left;
}
</style>